<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="_header_include::frag(~{::title},~{},~{})">
    <title>后台管理系统</title>
    <style>
        button a{color:#fff!important;}
    </style>
</head>
<body>
<div id="companyManage" class="companyManage mainPadding" style="display: none;">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>业务设置</el-breadcrumb-item>
        <el-breadcrumb-item>公司管理</el-breadcrumb-item>
    </el-breadcrumb>    
    <el-row>
      <el-col :span="12">
    		<!--<shiro:hasPermission name="aggregation:companyManager:add">-->
		        <el-button type="primary" @click="toAddCompany"><i class="el-icon-plus"></i>添加</el-button>
		    <!--</shiro:hasPermission>-->
    		<!--<shiro:hasPermission name="aggregation:companyManager:add">-->
		        <el-button type="success" @click="toUpdateCompany"><i class="el-icon-edit"></i>编辑</el-button>
		    <!--</shiro:hasPermission>-->
    		<!--<shiro:hasPermission name="aggregation:companyManager:add">-->
		        <el-button type="danger" @click="deleteCompany"><i class="el-icon-delete"></i>删除</el-button>
		    <!--</shiro:hasPermission>-->
      </el-col>
    </el-row>
        <div class="mainSearchBg">
            <div class="mainSearchFormBox">
        <el-form :inline="true" :model="companySearchForm " class="demo-form-inline mainSearchForm mainSearchForm" ref="companySearchForm">
            <el-form-item label="集团名称:" prop="companyGroupId" >
                <el-select v-model="companySearchForm.companyGroupId" filterable clearable placeholder="选择所属集团">
                    <el-option
                            v-for="item in userInfoList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公司名称:" prop="companyName" style="margin-right: 10px;">
            <el-input v-model="companySearchForm.companyName" placeholder="公司名称" class="input-with-select"></el-input>
          </el-form-item>
          <el-form-item label="联系电话:" prop="phoneNumber" style="margin-right: 10px;">
            <el-input v-model="companySearchForm.phoneNumber" placeholder="联系电话" class="input-with-select"></el-input>
          </el-form-item>
          <el-form-item label=""> 
              <el-button icon="el-icon-search" type="primary" @click="searchTable()">搜索</el-button>
          </el-form-item>    
        </el-form>
</div>
</div>
	  <div class="mainSearchBg">
      <el-row>
          <el-table  ref="multipleTable" tooltip-effect="dark" border @selection-change="handleSelectionChange"
              style="width: 100%"  :data="dataTable" >
              <el-table-column align="center" type="selection" label="全选" width="55"></el-table-column>
              <el-table-column align="center" type="index" label="序号" width="55"></el-table-column>
              <el-table-column align="center" prop="groupName" label="集团名称"></el-table-column>
              <el-table-column align="center" prop="companyName" label="公司名称"></el-table-column>
              <el-table-column align="center" prop="companyAddress" label="公司地址"></el-table-column>
              <el-table-column align="center" prop="phoneNumber" label="联系电话"></el-table-column>
              <el-table-column align="center" prop="website" label="官方网站" ></el-table-column>
             <el-table-column align="center" prop="createUserName" label="创建人" ></el-table-column>
          </el-table>
          <table-pagination :pager="pager" @change="searchTable"></table-pagination>
      </el-row>
    </div>
      <!-- dialog -->
    <el-dialog :title="addOrModifyDialogTitle" :visible.sync="dialogFormVisible" @close="closeAddCustomFieldDialog" width="540px">
        <el-form :model="companyForm" ref="companyForm" :rules="rules">
            <el-form-item label="公司名称：" :label-width="formLabelWidth" prop="companyName">
                <el-input v-model="companyForm.companyName" autocomplete="off"  maxlength="50" style="width: 290px;"></el-input>
            </el-form-item>
            <el-form-item label="集团名称：" prop="companyGroupId" :label-width="formLabelWidth">
                <el-select v-model="companyForm.companyGroupId"  filterable clearable placeholder="选择所属集团" style="width: 290px;">
                    <el-option
                            v-for="item in userInfoAddList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公司地址：" :label-width="formLabelWidth" prop="companyAddress">
                <el-input v-model="companyForm.companyAddress" autocomplete="off"  maxlength="100" style="width: 290px;"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="phoneNumber">
                <el-input v-model="companyForm.phoneNumber" autocomplete="off"  maxlength="50" style="width: 290px;"></el-input>
            </el-form-item>
            <el-form-item label="官网地址：" :label-width="formLabelWidth" prop="website">
                <el-input v-model="companyForm.website" autocomplete="off"  maxlength="100" style="width: 290px;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
            <el-button type="primary" :disabled="submitDisabled" @click="saveCompany('companyForm')">提交</el-button>
            <el-button @click="cancelForm('companyForm')">取 消</el-button>
        </div>
    </el-dialog>
</div>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
</body>
<script th:inline="javascript">
    var userInfoList = [[${ userInfoList }]];
    var userInfoAddList = [[${ userInfoAddList }]];
var companyVM = new Vue({
        el: '#companyManage',
        data: {
                userInfoList:userInfoList,
            userInfoAddList:userInfoAddList,
        		companySearchForm: {
	        		companyName: '',
	        		phoneNumber: '',
                    companyGroupId:''
	            },
	            companyForm: {
	            	id:'',
	            	companyName:'',
	            	groupName:'',
                	companyAddress:'',
                    phoneNumber:'',
                    website:'',
                    companyGroupId:''
                },
	            dataTable:[],
	            dialogFormVisible: false,
	            submitDisabled: false,
	            addOrModifyDialogTitle:'',
	            pager:{
	                total: 0,
	                currentPage: 1,
	                pageSize: 20,
	            },
	            multipleSelection:[],
                formLabelWidth: '150px',
                formLabelWidth1: '120px',
                rules: {
                	companyName: [
                      { required: true, message: '公司名称不能为空', trigger: 'blur' }
                    ],
                    companyGroupId: [
                      { required: true, message: '请选择所属集团', trigger: 'change' }
                    ],
                    companyAddress: [
                      { required: true, message: '公司地址不能为空', trigger: 'blur' }
                    ]
                  },
        },
        methods: {
        	searchTable() {
                var param ={};
                
                param.pageSize = this.pager.pageSize;
                param.pageNum = this.pager.currentPage;
                param.companyName = this.companySearchForm.companyName;
                param.phoneNumber = this.companySearchForm.phoneNumber;
                param.companyGroupId = this.companySearchForm.companyGroupId;
                console.info(param);
                axios.post('/aggregation/companyManager/list', param)
                .then(function (response) {
                      var result =  response.data;
                      console.info(result);
                      var table=result.data;
                      companyVM.dataTable= table.data;
                      companyVM.pager.total =  table.total;
                      companyVM.pager.currentPage = table.currentPage;
                })
                .catch(function (error) {
                     console.log(error);
                });
                
              },
              //选择行
              handleSelectionChange(val) {
                  this.multipleSelection = val;
              },
              //添加公司弹窗
              toAddCompany() {
                  	this.companyForm.id='';
                  	if (this.$refs['companyForm']!==undefined) {
	               		this.$refs['companyForm'].resetFields();
	               	}
                  	this.dialogFormVisible = true;
                  	this.addOrModifyDialogTitle="添加公司";
              },
              //跳转修改公司页
              toUpdateCompany() {
            	  var rows = this.multipleSelection;
                  if(rows.length!=1){
                      this.$message({
                         message: '请选择一条数据进行修改',
                         type: 'warning'
                       });
                      return;
                  }
                  this.addOrModifyDialogTitle="修改公司";
                  
                  var param={id:rows[0].id};
                  //根据id获取数据
                  axios.post('/aggregation/companyManager/getCompany',param)
                  .then(function (response) {
                      var data =  response.data;
                      if(data.code=='0'){
                    	  companyVM.companyForm= data.data;
                      }else{
                      	console.error(data);
                      }
                  })
                  .catch(function (error) {
                    console.log(error);
                  })
                  .then(function () {
                  }); 
                  this.dialogFormVisible = true;
              	
              },
              handleSizeChange(val) {
                  //下拉框  每页 10,20条切换 调用
                     console.log(`每页 ${val} 条`);
                  this.pageSize = val;
                  this.initTableData(1);
               },
               handleCurrentChange(val) {
                   //点击 页码
                 console.log(`当前页: ${val}`);
                 this.initTableData(val);
               },
               cancelForm(formName) {
            	   if (this.$refs[formName]!==undefined) {
               		this.$refs[formName].resetFields();
               		}
               	   this.dialogFormVisible = false;
               },
               closeAddCustomFieldDialog(){//关闭添加自定义字段dialog
	               	if (this.$refs['companyForm']!==undefined) {
	               		this.$refs['companyForm'].resetFields();
	               	}
               },
               saveCompany(formName){//保存自定义字段
                  this.$refs[formName].validate((valid) => {
                      if (valid) {
                    	 companyVM.submitDisabled=true;
                         var param=companyVM.companyForm;
                         var url="";
                         if(param.id!=""){
                        	 url="/aggregation/companyManager/updateCompany";
                         }else{
                        	 url="/aggregation/companyManager/saveCompany";
                         }
                        axios.post(url, param)
                        .then(function (response) {
                          var resData = response.data;
                          if(resData.code=='0'){
                            companyVM.cancelForm(formName);
                            companyVM.$message({message:'操作成功',type:'success',duration:1000,onClose:function(){
                                companyVM.submitDisabled=false;
                            		companyVM.searchTable();
                          	    }});
                            }else{
                              companyVM.$message('操作失败');
                              companyVM.submitDisabled=false;
                              console.error(resData);
                            }
                        })
                        .catch(function (error) {
                        	companyVM.submitDisabled=false;
                             console.log(error);
                        });
                         
                      } else {
                        return false;
                      }
                    });
                 },// method end
                 deleteCompany() {
              	   var rows = this.multipleSelection;
                     if(rows.length==0){
                         this.$message({
                            message: '请选择删除数据',
                            type: 'warning'
                          });
                         return;
                     }
                     var rowNames = [];
                     var rowIds = [];
                     for(var i=0;i<rows.length;i++){
                  	   var curRow = rows[i];
                         rowIds.push(curRow.id);
                         rowNames.push("【"+curRow.companyName+"】");
                     }
                     
                     var companyNames = rowNames.join(" ");
                  this.$confirm('确定要删除 '+companyNames+' 公司？', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                  }).then(() => {
                  	  //删除
                  	var param  = {idList:rowIds};
                      axios.post('/aggregation/companyManager/deleteCompany',param)
                      .then(function (response) {
                          var data =  response.data;
                          if(data.code=='0'){
                          	companyVM.$message({message:'删除成功',type:'success',duration:1000,onClose:function(){
                          		companyVM.searchTable();
                      	    }});
                              
                          }else{
                          	companyVM.$message({
                                  message: "接口调用失败",
                                  type: 'error'
                                }); 
                          }
                      })
                      .catch(function (error) {
                        console.log(error);
                      })
                      .then(function () {
                      	
                      });
                  }).catch(() => {
                         
                  });
              },//end
        },
        created(){
            // 取页数存储
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.pager.pageSize = localVal;}
            
            console.info("create method");
            this.searchTable();
           
        },
        mounted(){
           console.info("mounted method");
           document.getElementById('companyManage').style.display = 'block';
        }
    })
    
</script>
</html>